<route lang="jsonc" type="page">
{
  "layout": "tabbar",
  "style": {
    "navigationBarTitleText": "发现"
  }
}
</route>

<script lang="ts" setup>
import { nextTick, ref } from 'vue'
import { useSafeAreaInsets } from '@/utils/useSafeAreaInsets'

const { safeAreaInsets } = useSafeAreaInsets()

// 侧边栏当前选中项
const activeIndex = ref(0)
const scrollTop = ref<number>(0)

// 侧边栏菜单数据
const sidebarItems = [
  { title: '企业法务', value: 0, label: '企业法务' },
  { title: '人事合规', value: 1, label: '人事合规' },
  { title: '财税合规', value: 2, label: '财税合规' },
  { title: '工商记账', value: 3, label: '工商记账' },
  { title: '企业用工', value: 4, label: '企业用工' },
  { title: '媒体舆情', value: 5, label: '媒体舆情' },
  { title: '营销传播', value: 6, label: '营销传播' },
  { title: '企业出海', value: 7, label: '企业出海' },
  { title: '企业采购', value: 8, label: '企业采购' },
  { title: '知识产权', value: 9, label: '知识产权' },
  { title: '项目申报', value: 10, label: '项目申报' },
]

// 模拟各个分类的热门推荐数据
const categoryData = {
  0: { // 企业法务
    title: '企业法务热门推荐',
    items: [
      { title: '公司注册', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: 'linear-gradient(90deg, #FDF5F1 0%, #FFE8E9 100%)', boxshow: ' 0px 2px 4px 0px #DEDEDE40' },
      { title: '代理记账', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_2.png', bg: ' linear-gradient(90deg, #FFE8DE 0%, #FFE2D4 100%)', boxshow: '0px 2px 4px 0px #DEDEDE40' },
      { title: '税务筹划', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_3.png', bg: 'linear-gradient(90deg, #CFE3FF 0%, #E6EEFE 100%)', boxshow: '0px 2px 4px 0px #DEDEDE40' },
      { title: '股权变更', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_4.png', bg: 'linear-gradient(90deg, #E1E1FE 0%, #EBEAFF 100%)', boxshow: '0px 2px 4px 0px #DEDEDE40' },
    ],
  },
  1: { // 人事合规
    title: '人事合规热门推荐',
    items: [
      { title: '劳动合同', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '社保代缴', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '人事制度', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '员工培训', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
    ],
  },
  2: { // 财税合规
    title: '财税合规热门推荐',
    items: [
      { title: '税务申报', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '财务审计', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '税收筹划', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '发票管理', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
    ],
  },
  3: { // 工商记账
    title: '工商记账热门推荐',
    items: [
      { title: '代理记账', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '工商年报', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '财务报表', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '税务申报', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
    ],
  },
  4: { // 企业用工
    title: '企业用工热门推荐',
    items: [
      { title: '招聘服务', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '人才派遣', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '绩效管理', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '员工关系', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
    ],
  },
  5: { // 媒体舆情
    title: '媒体舆情热门推荐',
    items: [
      { title: '舆情监测', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '危机公关', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '媒体投放', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '品牌维护', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
    ],
  },
  6: { // 营销传播
    title: '营销传播热门推荐',
    items: [
      { title: '品牌策划', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '广告投放', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '活动策划', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '新媒体运营', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
    ],
  },
  7: { // 企业出海
    title: '企业出海热门推荐',
    items: [
      { title: '海外注册', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '跨境电商', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '国际商标', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '外贸咨询', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
    ],
  },
  8: { // 企业采购
    title: '企业采购热门推荐',
    items: [
      { title: '供应商管理', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '采购咨询', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '招投标服务', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '合同管理', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
    ],
  },
  9: { // 知识产权
    title: '知识产权热门推荐',
    items: [
      { title: '商标注册', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '专利申请', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '版权登记', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '知产保护', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
    ],
  },
  10: { // 项目申报
    title: '项目申报热门推荐',
    items: [
      { title: '政府补贴', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '高新认定', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '科技项目', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
      { title: '专项资金', image: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/legalservice_1.png', bg: '', boxshow: '0px 2px 4px 0px #dedede40' },
    ],
  },
}

// 处理侧边栏点击事件 - 切换页面用法
function handleChange(e: any) {
  const value = e.value
  activeIndex.value = value

  // 重置滚动位置到顶部
  scrollTop.value = -1
  nextTick(() => {
    scrollTop.value = 0
  })
}
</script>

<template>
  <view>
    <view class="legal-service-container bg-#fff">
      <!-- 侧边栏导航 -->
      <view class="sidebar-container">
        <wd-sidebar v-model="activeIndex" @change="handleChange">
          <wd-sidebar-item v-for="(item, index) in sidebarItems" :key="index" :title="item.title" :value="item.value" :label="item.label" />
        </wd-sidebar>
      </view>

      <!-- 内容区域 - 切换页面用法 -->
      <view class="content-container" :style="`transform: translateY(-${activeIndex * 100}%)`">
        <scroll-view
          v-for="(item, index) in sidebarItems"
          :key="index"
          class="category-page"
          scroll-y
          scroll-with-animation
          :show-scrollbar="false"
          :scroll-top="scrollTop"
          :throttle="false"
        >
          <view class="section-title">
            <text>{{ categoryData[item.value].title }}</text>
          </view>
          <view class="recommend-list">
            <view v-for="(recItem, recIndex) in categoryData[item.value].items" :key="recIndex" class="recommend-item" :style="{ background: recItem.bg, boxShadow: recItem.boxshow }">
              <view class="recommend-title">
                {{ recItem.title }}
              </view>
              <view class="recommend-image-container">
                <image :src="recItem.image" class="recommend-image" mode="aspectFill" :lazy-load="true" />
              </view>
            </view>
          </view>
          <view class="h-140rpx"></view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.legal-service-container {
  display: flex;
  height: calc(100vh - 67rpx);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff;
  position: relative;
  overflow: hidden; /* 防止内容溢出 */
}

.sidebar-container {
  /* 让侧边栏采用与父容器相同的高度计算方式 */
  // #ifdef MP
  height: calc(100vh - 100rpx);
  // #endif
  // #ifdef H5
  height: 100%; // 93%
  // #endif
  overflow-y: auto;
  background-color: #fff;
  border-right: 1px solid #f5f5f5;
  -webkit-overflow-scrolling: touch;
}

.content-container {
  flex: 1;
  background-color: #fff;
  transition: transform 0.3s ease; /* 添加切换动画 */
}

.category-page {
  box-sizing: border-box;
  height: 100%;
  padding: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  padding: 20rpx 0;
  position: relative;
  margin-bottom: 20rpx;
}

.recommend-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.recommend-item {
  display: flex;
  width: 240rpx;
  height: 82rpx;
  margin-bottom: 20rpx;
  align-items: center;
  border-radius: 12rpx;
  justify-content: space-around;
}

.recommend-image-container {
  width: 40rpx;
  height: 40rpx;
}

.recommend-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recommend-title {
  font-size: 28rpx;
  color: #333;
  margin-top: 10rpx;
}

:deep(.wd-sidebar) {
  height: 100%;
  background-color: #fff;
  /* Enable scrolling within the sidebar component */
  // #ifdef MP
  overflow-y: auto;
  // #endif
}

:deep(.wd-sidebar-item) {
  font-size: 28rpx;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  padding: 0;
}

:deep(.wd-sidebar-item__title) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

:deep(.wd-sidebar-item.is-active) {
  color: #333;
  font-weight: bold;
}

:deep(.wd-sidebar-item--active::before) {
  margin-left: 14rpx;
  background-color: #df2023 !important;
}

:deep(.wd-sidebar-item--active) {
  color: #df2023 !important;
}
</style>
